<template>
  <view class="content">
    <text class="title">分类页面</text>

    <!-- 圆形进度条 -->
    <svg class="progress-circle" viewBox="0 0 100 100">
      <circle class="progress-bg" cx="50" cy="50" r="45"></circle>
      <circle class="progress" cx="50" cy="50" r="45" :stroke-dasharray="circumference" :stroke-dashoffset="offset"></circle>
    </svg>

    <view class="item-list">
      <view v-for="(item, index) in itemList" :key="index" class="item">
        <text>{{ item }}</text>
      </view>
      <text v-if="loading" class="loading">加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';

const itemList = ref([]); // 用于显示的项目列表
const loading = ref(false); // 加载状态
const totalItems = 100; // 总共的项目数量
const itemsPerPage = 20; // 每页显示的项目数量
let currentPage = 0; // 当前页数
const progress = ref(0); // 进度条的宽度

// 计算圆周长
const circumference = 2 * Math.PI * 45; // 半径为 45 的圆的周长

// 计算偏移量
const offset = computed(() => {
  return circumference - (progress.value / 100) * circumference;
});

// 加载项目数据的函数
function loadData() {
  loading.value = true;
  setTimeout(() => {
    const start = currentPage * itemsPerPage;
    const end = start + itemsPerPage;
    const newItems = Array.from({ length: Math.min(itemsPerPage, totalItems - start) }, (_, i) => `项目 ${start + i + 1}`);
    itemList.value.push(...newItems);
    loading.value = false;
    currentPage++;
    updateProgress(); // 更新进度条
  }, 1000);
}

// 更新进度条
function updateProgress() {
  progress.value = 0; // 重置进度
  const interval = setInterval(() => {
    if (progress.value < 100) {
      progress.value += (100 / 60); // 每秒增加约1.67%
    } else {
      clearInterval(interval); // 达到100%后停止
    }
  }, 1000); // 每秒更新
}

// 页面加载时加载初始项目数据
onMounted(() => {
  loadData();
});
</script>

<style>
.content {
  padding: 20rpx;
}

.title {
  font-weight: bold;
  font-size: 18rpx;
  margin-bottom: 20rpx;
}

/* 圆形进度条样式 */
.progress-circle {
  width: 100px; /* 圆形进度条的宽度 */
  height: 100px; /* 圆形进度条的高度 */
  margin: 0 auto; /* 居中 */
}

.progress-bg {
  fill: none;
  stroke: #e0e0e0; /* 背景颜色 */
  stroke-width: 10; /* 边框宽度 */
}

.progress {
  fill: none;
  stroke: #45d8ae; /* 进度条颜色 */
  stroke-width: 10; /* 边框宽度 */
  transition: stroke-dashoffset 0.5s ease; /* 动画效果 */
}

.item-list {
  margin-top: 20rpx; /* 上间距 */
}

.item {
  padding: 10rpx;
  border: 1px solid #ccc;
  margin-bottom: 10rpx;
}

.loading {
  text-align: center;
  color: #999;
}
</style>
